$(document).ready(function () {
    const link = window.location.href.split('#')[1] // 获取锚点名称
    if (link) {
        let idx = link[link.length - 1] - 1
        $('.public-nav').find(`li:eq(${idx})`).addClass('public-active').siblings().removeClass('public-active')
    }    
    const designRadio = 1920 / 100
    // 所以为了方便计算，我们通常设置根元素font-size:100px;
    // 设计稿宽为1920，那么1rem就是19.2
    const remSize = window.innerWidth / designRadio
    $(window).scroll(function (e) {
        let scrollTop = $(window).scrollTop()
        if (scrollTop > remSize * 5) {
            $('.public-nav').css({position:'fixed', left: '0', top: '0', 'z-index': 999, 'box-shadow': '0 .1rem .14rem 0.01rem  rgba(0,0,0,0.1)'})
        } else {
            // box-shadow: 0px 10px 24px 1px rgba(0,0,0,0.1);
            $('.public-nav').css({position:'static', 'z-index': 1}) 
        }
    })

    $('.public-nav').find('li').click(function () {
        $(this).addClass('public-active').siblings().removeClass('public-active')

    })

    $(window).on('scroll', function() {
        var scrollPos = $(document).scrollTop(); // 获取当前滚动位置
        
        // 遍历所有Tab，根据滚动位置更新选中状态
        $('.public-nav li a').each(function() {
            
            let target = $(this).attr('href'); // 获取每个Tab对应的目标元素的ID
            let offset = $(target).offset().top; // 获取目标元素的顶部偏移量
            let height = $(target).height(); // 获取目标元素的高度
            console.log(scrollPos, target, offset, height)
            // 判断当前位置是否在目标元素内
            if (scrollPos >= offset && scrollPos < offset + height) {
                $(this).parent().siblings().removeClass('public-active'); // 移除其他Tab的选中状态
                $(this).parent().addClass('public-active'); // 为当前Tab添加选中状态
            }
        });
      });
       
      // 初始化时更新一次选中状态
      $(window).trigger('scroll');
})